<template>
	<view class="container">
		<view class="orderReceiving" v-if="showOrderReceiving">
			<view class="title">订单接受中······</view>
		</view>
		<view class="goods-list" v-else>
			<view class="goods-item" v-for="(item,index) of orderList" :key="index">
				<view class="goods-image">
					<image :src="item.imgPath" :mode="'aspectFit'"></image>
				</view>
				<view class="goods-info">
					<view class="goods-name">{{item.goodsName}}</view>
					<view class="price"><text>{{item.amount}}</text>元</view>
				</view>
				<view class="goods-status" @tap="showActionSheet(item)">{{computedStatus(item.status)}}</view>
				<view class="goods-num">x{{item.number}}</view>
			</view>
		</view>
		<view class="botNav">查看历史订单</view>
	</view>

</template>

<script>
	import {mapGetters} from 'vuex' 
		
	export default {
		data() {
			return {
				showOrderReceiving: false,
				orderList: [],
				userId: ''
			};
		},
		created(){
			this.getUserId();
		},
		computed: {
			...mapGetters(['getUserName'])
		},
		methods: {
			getUserId(){
				uni.$http({
					url: `/sys/user/getUserId?userName=${this.getUserName}`,
					method: "GET",
				}).then((res) => {
					
					const _data = res[1].data;
					
					if(_data.msg !== 'success'){
						uni.showToast({
							title: '验证码不能为空',
							icon: 'none'
						});
					}else{
						this.userId = _data.data;
						this.buildLinkWebSocket();
					}
				})
			},
			buildLinkWebSocket(){
				const _this = this;
				uni.connectSocket({
					url: `ws://47.98.146.179:8080/renren-admin/notice/${ this.userId }`
				});
				
				uni.onSocketOpen(function (res) {
				  console.log('WebSocket连接已打开！');
				});
				
				uni.onSocketMessage(function(res){
					const _data = JSON.parse(res.data);
					_this.orderList = _data.noticeInfo;
				})
			},
			computedStatus(str){
				if(str == '0'){
					return '未分拣'
				}else if(str == '1'){
					return '正在分拣'
				}else if(str == '2'){
					return '放入传送带'
				}else if(str == '3'){
					return '总台接受'
				}
			},
			// 获取分区管理员数据
			getOrderData(){
				this.orderList = [];
				uni.$http({
					url: `/order/goodsorderdetail/app/getOrderDetailsInfo/${ this.userId }`,
					method: 'GET'
				}).then((res) => {
					const _data = res[1].data;
					this.orderList = _data.noticeInfo;
				})
			},
			// 底部弹窗修改状态
			showActionSheet(data){
				const _this = this;
				uni.showActionSheet({
					itemList: ['未分拣','正在分拣','放入传送带'],
					success:function(res){
						
						uni.$http({
							url: `/order/goodsorderdetail/updateStatus/${data.id}?status=${res.tapIndex} `,
							method: 'POST'
						}).then((res) => {
							const _data = res[1].data;
							
							if(_data.data == '操作成功'){
								uni.showToast({
									title:'操作成功',
									icon:'none'
								})
							};
							_this.getOrderData();
						})
					},
					fail: function(res){
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@keyframes animated-border {
		0%{
			box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
		}
		100%{
			box-shadow: 0 0 0 200rpx rgba(255, 255, 255, 0);
		}
	}
	
	page{
		width: 100%;
		height: 100%;
		background-color: lightskyblue;
		
		.container{
			width: 100%;
			height: 100%;
		}
	}

	.orderReceiving{
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		margin-top: 200rpx;
		
		.title{
			width: 250rpx;
			height: 250rpx;
			line-height: 250rpx;
			text-align: center;
			font-family: Arial, Helvetica, sans-serif;
			
			color: black;
			border: 6rpx solid green;
			padding: 15rpx;
			border-radius: 50%;
			animation: animated-border 3s infinite;
		}
	}

	.botNav{
		position: fixed;
		bottom: 0rpx;
		right: 0rpx;
		height: 80rpx;
		width: 220rpx;
		line-height: 80rpx;
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
		background-color: ghostwhite;
		border-radius: 8rpx;
		box-shadow: -2rpx -4rpx -6rpx #000;
	}
	
	
	.goods-list{
		display: flex;
		flex-direction: column;
		width: 750rpx;
		
		.goods-item{
			display: flex;
			justify-items: center;
			align-items: center;
			width: 710rpx;
			height: 210rpx;
			margin: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
			
			
			.goods-image{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 180rpx;
				height: 180rpx;
				
				image{
					height: 104rpx;
					width: 104rpx;
				}
			}
			
			.goods-info{
				display: flex;
				flex-direction: column;
				width: 250rpx;
				height: 180rpx;
				
				.goods-name{
					width: 250rpx;
					height: 100rpx;
					line-height: 100rpx;
				}
				
				.price{
					width: 250rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					
					text{
						color: red;
						font-weight: bold;
					}
				}
			}
			
			.goods-status{
				height: 180rpx;
				width: 180rpx;
				line-height: 180rpx;
				text-align: center;
			}
			
			.goods-num{
				height: 180rpx;
				width: 70rpx;
				line-height: 180rpx;
				text-align: center;
			}
		}
		
	}

</style>
